
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:comp="http://java.sun.com/jsf/composite/componentes"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<ui:define name="coluna_central">

		<div id="middle" class="middle">
			<div class="row">
				<!-- INICIO PRODUTOS LATERAIS -->
				<div class="span3">
					<h:form>
						<a> </a>
						<ui:repeat var="listOfertas" value="#{indexBean.listaOfertas}">
							<p:column>
								<div class="thumbnail hover" style="height: 215px">
									<h:commandLink id="imagemOferta"
										action="#{indexBean.visualizarOferta}">
										<img
											src="data:image/png;base64,${listOfertas.codProduto.foto}"
											style="width: 300px; height: 170px"></img>
									</h:commandLink>
									<br />
									<div class="thumbnail center">
										<h:outputText value="#{listOfertas.codProduto.nomeProduto}"></h:outputText>
										<p />
										<h:outputText
											value="R$ #{listOfertas.codProduto.valorProduto}"></h:outputText>
									</div>
								</div>
								<br />
							</p:column>
						</ui:repeat>
					</h:form>
				</div>

				<div class="span9">
					<p:carousel var="listOfertasDestaque"
						value="#{indexBean.listaOfertasDestaque}" id="destaquesCarousel"
						numVisible="1" autoPlayInterval="5000" circular="true"
						itemStyleClass="carItem" itemStyle="height:201px; width:690px;"
						effect="easeInStrong">
						<p:commandLink id="imagemOfertaDestaque"
							action="#{indexBean.visualizarOfertaDestaque}">
							<p:tab title="#{listOfertasDestaque.codProduto.nomeProduto}">
								<h:panelGrid columns="2" cellpadding="10">
									<img
										src="data:image/png;base64,${listOfertasDestaque.codProduto.foto}"
										style="width: 300px; height: 170px"></img>
									<h:outputText
										value="#{listOfertasDestaque.codProduto.descProduto} &lt;br /&gt;&lt;br /&gt;  &lt;b&gt;Valor:&lt;/b&gt;  R$ #{listOfertasDestaque.codProduto.valorProduto}"
										escape="false"></h:outputText>
								</h:panelGrid>
							</p:tab>
						</p:commandLink>
					</p:carousel>
				</div>

				<div class="span9">
					<br />
					<h4>Ultimas Ofertas</h4>
					<br />
					<h:form>
						<ui:repeat var="listUltimasOfertas"
							value="#{indexBean.listaUltimasOfertas}">
							<p:column>
								<div class="thumbnail hover span3" style="width: 200px">
									<h:commandLink id="imagemOferta"
										action="#{indexBean.visualizarUltimasOferta}">
										<img
											src="data:image/png;base64,${listUltimasOfertas.codProduto.foto}"
											style="width: 230px; height: 162px"></img>
									</h:commandLink>
									<br />
									<div class="thumbnail center">
										<h:outputText
											value="#{listUltimasOfertas.codProduto.nomeProduto}"></h:outputText>
										<p />
										<h:outputText
											value="R$ #{listUltimasOfertas.codProduto.valorProduto}"></h:outputText>
									</div>
								</div>
							</p:column>
						</ui:repeat>
					</h:form>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>